<template>
  <div class="BuyVoucher_box">
    <div class="BuyVoucher_box_text1">
      {{ $t("button.Avatar1") }}
    </div>
    <div class="BuyVoucher_box_text2"></div>
    <div class="BuyVoucher_box_text3">
      <span class="span1">Main Board : ID {{ id }}</span
      ><span class="span2"
        >My level :
        <span style="color: skyblue"> Avatar{{ grade }}-{{ number }}</span>
      </span>
    </div>
    <div class="footers" v-if="changeMin">
      <tree :treeData="treeData" :treeFirst="true"></tree>
    </div>
    <!--<div class="span3"></div>-->
    <!--   <div class="span4">Level-{{ Level }}</div> -->
    <div
      @click="DetailsOpeartion(dataList[0].id, 1)"
      class="span5s cursor"
      style="top: 300px"
      v-if="dataList.length > 0 && dataList[0].number > 0"
    >
      Avatar{{ dataList[0].grade }}-{{ dataList[0].number }}
    </div>
    <div
      @click="DetailsOpeartion(dataList[1].id, 2)"
      class="span5s cursor"
      style="top: 400px"
      v-if="dataList.length > 1 && dataList[1].number > 0"
    >
      Avatar{{ dataList[1].grade }}-{{ dataList[1].number }}
    </div>
    <div
      @click="DetailsOpeartion(dataList[2].id, 3)"
      class="span5s cursor"
      style="top: 500px"
      v-if="dataList.length > 2 && dataList[2].number > 0"
    >
      Avatar{{ dataList[2].grade }}-{{ dataList[2].number }}
    </div>
    <div
      @click="DetailsOpeartion(dataList[3].id, 4)"
      class="span5s cursor"
      style="top: 600px"
      v-if="dataList.length > 3 && dataList[3].number > 0"
    >
      Avatar{{ dataList[3].grade }}-{{ dataList[3].number }}
    </div>
  </div>
</template>

<script>
import { avatar, avatar_list } from "@/api/user.js"; //  介绍 提现 提现记录
import tree from "./TreeItem2.vue";
export default {
  components: {
    tree,
  },
  data() {
    return {
      grade: "",
      number: "",
      changeMin: false,
      id: "",
      dataLis: {},
      treeData: [],
      dataList: [], //小号结构图
      treeFirst: false,
      query: {
        user_id: "", // 用户id
      },
      querys: {
        user_id: "", // 小号id
      },
    };
  },
  created() {
    this.Level = sessionStorage.getItem("grade");
    this.id = sessionStorage.getItem("user_code");
    this.query.user_id = sessionStorage.getItem("id");
    this.avatar_list(this.query);
  },
  methods: {
    // 会员结构图
    async avatar(query) {
      try {
        this.treeData = [];
        const data = await avatar(query);
        if (this.dataList.length > 0) {
          this.treeData.push(data.data);
          this.dataLis = data;
        }
        console.log(data);
      } catch (error) {
        console.log(error);
      }
    },
    // 小号结构图
    async avatar_list(query) {
      try {
        const data = await avatar_list(query);
        this.dataList = data.data;
        if (this.dataList.length > 0) {
          this.changeMin = true;
          this.grade = this.dataList[0].grade;
          this.number = this.dataList[0].number;
          this.querys.user_id = this.dataList[0].id;
          this.avatar(this.querys);
        }
        console.log(this.dataList, "data");
      } catch (error) {
        console.log(error);
      }
    },
    DetailsOpeartion(id, unm) {
      if (unm == 1) {
        this.grade = this.dataList[0].grade;
        this.number = this.dataList[0].number;
      } else if (unm == 2) {
        this.grade = this.dataList[1].grade;
        this.number = this.dataList[1].number;
      } else if (unm == 3) {
        this.grade = this.dataList[2].grade;
        this.number = this.dataList[2].number;
      } else if (unm == 4) {
        this.grade = this.dataList[3].grade;
        this.number = this.dataList[3].number;
      }
      this.querys.user_id = id;
      this.avatar(this.querys);
    },
  },
};
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding-top: 45px;
}
.BuyVoucher_box {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 922px;
  background: #ffffff;
}
.BuyVoucher_box_text1 {
  margin: 62px 0 0 132px;
  height: 42px;
  font-size: 56px;
  font-family: Arial;
  font-weight: bold;
  color: #1a1a1a;
}
.BuyVoucher_box_text2 {
  margin: 53px 0 0 0;
  width: 1918px;
  height: 2px;
  background: #bfbfbf;
}
.BuyVoucher_box_text3 {
  margin: 22px 0 0 123px;
  height: 23px;
  font-size: 30px;
  font-family: Arial;
  font-weight: 400;
  color: #999999;
  line-height: 110px;
}
.span1 {
  display: inline-block;
}
.span2 {
  margin-left: 120px;
  display: inline-block;
}
.footers {
  margin-top: 280px;
}
.span3 {
  position: absolute;
  top: 400px;
  left: 1000px;
  height: 20px;
  border: 2px solid #999999;
}
.footerss1 {
  position: absolute;
  top: 200px;
  left: 900px;
  width: 186px;
  height: 186px;
  border: 6px solid #b9c8f3;
  background: linear-gradient(0deg, #5f86f6 0%, #2152f1 100%);
  border-radius: 50%;
  line-height: 26px;
}
.span4 {
  position: absolute;
  top: 200px;
  left: 190px;
  height: 28px;
  font-size: 36px;
  font-family: Arial;
  font-weight: bold;
  color: #1a1a1a;
  line-height: 110px;
}
.span5s {
  position: absolute;
  left: 180px;
  width: 197px;
  height: 57px;
  background: #00b0f0;
  border-radius: 10px;
  text-align: center;
  line-height: 57px;
  font-size: 36px;
  font-family: Arial;
  font-weight: bold;
  color: #ffffff;
}
</style>
